import React from 'react'
import { Input, Row, Col, Button, Space } from 'antd'

const AddressQuestionComponents = (props) => {
    const {
        data = {},
        index,
        selectIndex,
        onChange
    } = props
    const {
        title,
        type,
        label,
        require = false,
        desc,
        rule = '',
        addressType = true
    } = data
    const rulePlaceholder = {
        province: '省',
        city: '省/市',
        area: '省/市/区',
        street: '省/市/区/街道',
        community: '省/市/区/街道/社区',
    }[rule]
    return <div onClick={(e) => {
    }}>
        <Row style={{ padding: 24, background: "#ffffff" }} gutter={[36, 12]}>
            <Col style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} span={24}>
                <div>{require ? <span style={{ marginRight: 4, color: 'red' }}>*</span> : ''}{index}.{title}</div>
                <div style={{ fontSize: 16, cursor: 'pointer' }}></div>
                <div>
                    {selectIndex == index ? <Space>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'coby',
                                data: data,
                            })
                        }}>复制</Button>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'delete',
                            })
                        }}>删除</Button>
                    </Space> : ''}
                </div>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            label: e.target.value,

                        },
                        index: index
                    })
                }} value={label} placeholder='请输入题目标题'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            desc: e.target.value
                        },
                        index: index
                    })
                }} value={desc} placeholder='请输入题目描述（选填）'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Input disabled placeholder={rulePlaceholder}></Input>
            </Col>
            {addressType && <Col span={12} offset={6}>
                <Input disabled placeholder={`请输入详细地址`}></Input>
            </Col>}

        </Row>
    </div>
}
export default AddressQuestionComponents